<template>
    <div>
        <div class="table_box">
            <el-table
                border
                ref="table"
                :data="tableData"
                @row-click="rowClickForDelete"
                :row-class-name="tableRowClassName"
                header-row-class-name="tableRow"
                v-loading="isTableDataLoading"
            >
                <el-table-column label="序号" width="70" align="center">
                    <template slot-scope="scope">{{
                        pageSize * (currentPage - 1) + scope.$index + 1
                    }}</template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="姓名"
                    width="130"
                    align="center"
                >
                </el-table-column>
                <el-table-column label="状态" width="130" align="center"
                    ><template slot-scope="scope">{{
                        scope.row.positive == 0
                            ? "阴性"
                            : scope.row.positive == 1
                            ? "阳性"
                            : "密接"
                    }}</template>
                </el-table-column>
                <el-table-column label="广播日期" width="220" align="center"
                    ><template slot-scope="scope">{{
                        formatDate(scope.row.broadcast_date)
                    }}</template>
                </el-table-column>
                <el-table-column label="登记日期" width="220" align="center">
                    <template slot-scope="scope">{{
                        formatDate(scope.row.date)
                    }}</template>
                </el-table-column>
                <el-table-column
                    prop="hash_code"
                    label="哈希码"
                    align="center"
                    show-overflow-tooltip
                    class-name="equalWidthFont"
                >
                </el-table-column>
            </el-table>
            <el-pagination
                class="pagination"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                :total="total"
                :page-sizes="[10, 15, 20, 25, 30]"
                layout="sizes, prev, pager, next, jumper"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            currentPage: 1,
            tableData: [],
            total: 0,
            pageSize: 0,
            isTableDataLoading: false,
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData(page, pageSize) {
            this.isTableDataLoading = true;
            axios
                .post("/api/hdet/query_history", {
                    page: page || 1,
                    pageSize: pageSize || 10,
                })
                .then((res) => {
                    this.tableData = res.data.res;
                    this.pageSize = res.data.pageSize;
                    this.total = res.data.total;
                    this.isTableDataLoading = false;
                });
        },
        formatDate(timeStamp) {
            var date = new Date(Number(timeStamp));
            var y = 1900 + date.getYear();
            var m = "0" + (date.getMonth() + 1);
            var d = "0" + date.getDate();
            var h = "0" + date.getHours();
            var minute = "0" + date.getMinutes();
            var second = "0" + date.getSeconds();
            return (
                y +
                "-" +
                m.substring(m.length - 2, m.length) +
                "-" +
                d.substring(d.length - 2, d.length) +
                " " +
                h.substring(h.length - 2, h.length) +
                ":" +
                minute.substring(minute.length - 2, minute.length) +
                ":" +
                second.substring(second.length - 2, second.length)
            );
        },
        handleCurrentChange(page) {
            this.getData(page, this.pageSize);
        },
        handleSizeChange(size) {
            this.getData(this.currentPage, size);
        },
        rowClickForDelete(row) {
            this.$confirm("确定删除 " + row.name + " 的这条广播历史记录么？", {
                type: "warning",
                confirmButtonClass: "el-button--warning",
            })
                .then(() => {
                    axios
                        .post("/api/hdet/delete_history", { id: row.id })
                        .then((res) => {
                            if (res.data.h_code == -1) {
                                this.$notify({
                                    title: "删除失败",
                                    message: res.data.msg,
                                    type: "error",
                                });
                            } else {
                                this.$notify({
                                    title: "成功",
                                    duration: 500,
                                    message: "删除成功",
                                    type: "success",
                                });
                                this.getData();
                            }
                        });
                })
                .catch(() => {});
        },
        tableRowClassName({ row, rowIndex }) {
            return "tableRow";
        },
    },
};
</script>

<style>
.pagination {
    text-align: center;
    margin-top: 20px;
    margin-left: -30px;
}
</style>